<template>
    <div style="width: 100%; border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
            :mode="mode" />
        <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
            :mode="mode" @onCreated="handleCreated" />
    </div>
</template>
<script lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted, toRefs, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { IEditorConfig } from '@wangeditor/editor'
import { getUploadUrlApi } from '../../api/cms/article/article'

interface Data {
    [key: string]: unknown
}
interface SetupContext {
    //这里还有其他的，为了避免混淆，就不写了。
    emit: (event: string, ...args: unknown[]) => void
}
type InsertFnType = (url: string, alt: string, href: string) => void

export default {
    components: { Editor, Toolbar },
    props: {
        editorValue: {
            type: String,
            default: '',
        }
    },
    setup(props: Data, { emit }: SetupContext) {
        const { editorValue } = toRefs(props)

        // 编辑器实例，必须用 shallowRef
        const editorRef = shallowRef()

        // 内容 HTML
        const valueHtml = ref('')

        // 模拟 ajax 异步获取内容
        onMounted(() => {

        })

        const toolbarConfig = {}
        const editorConfig: Partial<IEditorConfig> = {
            placeholder: '请输入内容...', MENU_CONF: {
                'uploadImage': {
                    // 上传图片的配置
                    // server: 'http://localhost:8181/api/v1/attach/upload',
                    server: getUploadUrlApi(),
                    fieldName: 'file',

                    // 单个文件的最大体积限制，默认为 3M
                    maxFileSize: 3 * 1024 * 1024,

                    // 最多可上传几个文件，默认为 100
                    maxNumberOfFiles: 10,

                    // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                    allowedFileTypes: ['image/*'],

                    // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                    // meta: {
                    //     token: 'xxx',
                    //     otherKey: 'yyy'
                    // },

                    // 将 meta 拼接到 url 参数中，默认 false
                    metaWithUrl: false,
                    // 单个文件上传成功之后
                    onSuccess(file: File, res: any) {
                        console.log(`${file.name} 上传成功`, res)
                    },
                    // 上传错误，或者触发 timeout 超时
                    onError(file: File, err: any, res: any) {
                        console.log(`${file.name} 上传出错`, err, res)
                    },
                    // 自定义插入图片
                    customInsert(res: any, insertFn: InsertFnType) {
                        // res 即服务端的返回结果

                        // 从 res 中找到 url alt href ，然后插图图片
                        insertFn(res.data[0], '', '')
                    },
                }
            }
        }

        // editorConfig.MENU_CONF['uploadImage'] = {
        //     // 上传图片的配置
        //     // server: 'http://localhost:8181/api/v1/attach/upload',
        //     server: getUploadUrlApi(),
        //     fieldName: 'file',

        //     // 单个文件的最大体积限制，默认为 3M
        //     maxFileSize: 3 * 1024 * 1024,

        //     // 最多可上传几个文件，默认为 100
        //     maxNumberOfFiles: 10,

        //     // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
        //     allowedFileTypes: ['image/*'],

        //     // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
        //     // meta: {
        //     //     token: 'xxx',
        //     //     otherKey: 'yyy'
        //     // },

        //     // 将 meta 拼接到 url 参数中，默认 false
        //     metaWithUrl: false,
        //     // 单个文件上传成功之后
        //     onSuccess(file: File, res: any) {
        //         console.log(`${file.name} 上传成功`, res)
        //     },
        //     // 上传错误，或者触发 timeout 超时
        //     onError(file: File, err: any, res: any) {
        //         console.log(`${file.name} 上传出错`, err, res)
        //     },
        //     // 自定义插入图片
        //     customInsert(res: any, insertFn: InsertFnType) {
        //         // res 即服务端的返回结果

        //         // 从 res 中找到 url alt href ，然后插图图片
        //         insertFn(res.data[0], '', '')
        //     },
        // }

        // 组件销毁时，也及时销毁编辑器
        onBeforeUnmount(() => {
            const editor = editorRef.value
            // console.log("editor=", editor)
            if (editor == null) return
            editor.destroy()
        })

        const handleCreated = (editor: string) => {
            editorRef.value = editor // 记录 editor 实例，重要！
        }

        watch(
            () => editorValue.value,
            (newValue) => {
                valueHtml.value = String(newValue)
            }
        )
        watch(
            () => valueHtml.value,
            (newValue) => {
                // console.log(newValue)
                emit('inputContent', newValue)
            }
        )

        return {
            editorRef,
            valueHtml,
            mode: 'default', // 或 'simple'
            toolbarConfig,
            editorConfig,
            handleCreated
        };
    }
}
</script>